<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('文章头图')" />
    <th:block th:include="include :: cropbox-css" />

    <style>
        .img-imageBox{
            height: 500px;
            width: 900px;
        }
        .imageBox .img-thumbBox{
            height: 400px;
            width: 700px;
            margin-top: -200px;
            margin-left: -350px;
        }
    </style>

</head>
<body class="white-bg">
<div class="container">
    <div class="imageBox img-imageBox">
        <div class="thumbBox img-thumbBox"></div>
        <div class="spinner" style="display: none">Loading...</div>
    </div>
    <div class="action">
        <div class="new-contentarea tc">
            <a href="javascript:void(0)" class="upload-img"> <label for="avatar">上传图像</label> </a>
            <input type="file" class="" name="avatar" id="avatar" accept="image/*"/>
        </div>
        <input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切" />
        <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+" />
        <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" />
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: cropbox-js" />
<script type="text/javascript">
    var prefix = ctx + "content/article";
    var cropper;
    var articleId = '';
    $(window).load(function() {
        var imgSrc = '[[${article.image}]]';
        articleId = '[[${article.articleId}]]';
        var options = {
            thumbBox: '.thumbBox',
            spinner: '.spinner',
            imgSrc: $.common.isEmpty(imgSrc) ? ctx + 'img/article.jpg' : imgSrc
        }
        cropper = $('.imageBox').cropbox(options);
        $('#avatar').on('change', function() {
            var reader = new FileReader();
            reader.onload = function(e) {
                options.imgSrc = e.target.result;
                //根据MIME判断上传的文件是不是图片类型
                if((options.imgSrc).indexOf("image/")==-1){
                    $.modal.alertWarning("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
                } else {
                    cropper = $('.imageBox').cropbox(options);
                }
            }
            reader.readAsDataURL(this.files[0]);
        })

        $('#btnCrop').on('click', function(){
            var img = cropper.getDataURL();
        })

        $('#btnZoomIn').on('click', function(){
            cropper.zoomIn();
        })

        $('#btnZoomOut').on('click', function(){
            cropper.zoomOut();
        })
    });

    function submitHandler() {
        var img = cropper.getBlob();
        var formdata = new FormData();
        formdata.append("articleImg", img);
        $.ajax({
            url: prefix + "/img/" + articleId,
            data: formdata,
            type: "post",
            processData: false,
            contentType: false,
            success: function(result) {
                $.operate.saveSuccess(result);
            }
        })
    }
</script>
</body>
</html>